<div>
  <button (click)="test()">test</button>
  <button (click)="getProgramLine()">getProgramLine</button>
  <button (click)="getProgramTypes()">getProgramTypes</button>
  <button (click)="getTagLine()">getTagLine</button>
  <button (click)="getTagTypes()">getTagTypes</button>
  <button (click)="getFile()">getFile</button>
  <button (click)="hide()">hide</button>

  <button #clock_button mat-button [matMenuTriggerFor]="clock_menu">时钟</button>

  <mat-menu #clock_menu="matMenu">
  </mat-menu>

    <mat-form-field>
      <input name="" matInput placeholder="10:08:00" [(ngModel)]="clock_value">
    </mat-form-field>
    <button (click)="add_clock()">add_clock</button>


  <button mat-button (click)="openDialog()">Pick one</button>
</div>

<!-- <img [src]=" getSafeUrl(imgSrc)" id="capture"/> -->

<!-- <img src="/assets/logo.png" /> -->
<div>{{tmp}}</div>
<!-- <div #pixi></div> -->

<!-- <canvas #line [width]="CANVAS_WIDTH" [height]="CANVAS_HEIGHT"></canvas> -->

<mat-card id="upper-card" [ngStyle]="{width}">
  <mat-form-field appearance="fill" id="date-container">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="date" (ngModelChange)="updateDate($event)">
    <mat-hint>MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <div >{{programInfo}}</div>
  <div id="line"></div>
  <div id="slider"></div>
</mat-card>


<section class="table-container mat-elevation-z8" tabindex="0">
  <table id="table" mat-table [dataSource]="program_line" >
    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let program"> {{program.id}} </td>
    </ng-container>

    <!-- Program Name Column -->
    <ng-container matColumnDef="program_name">
      <th mat-header-cell *matHeaderCellDef> Program Name </th>
      <td mat-cell *matCellDef="let program"> {{program.program_name}} </td>
    </ng-container>

    <!-- Title Column -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef> Title </th>
      <td mat-cell *matCellDef="let program"> {{program.title}} </td>
    </ng-container>

    <!-- Begin Time Column -->
    <ng-container matColumnDef="begin_time">
      <th mat-header-cell *matHeaderCellDef> Begin Time </th>
      <td mat-cell *matCellDef="let program"> {{program.begin_time}} </td>
    </ng-container>

    <!-- End Time Column -->
    <ng-container matColumnDef="end_time">
      <th mat-header-cell *matHeaderCellDef> End Time </th>
      <td mat-cell *matCellDef="let program"> {{program.end_time}} </td>
    </ng-container>

    <!-- Table Rows -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
    <tr mat-row *matRowDef="let program; columns: displayedColumns;"></tr>
  </table>
</section>



<img id="capture" [src]="getSafeUrl(imgSrc)" alt="截屏图片"/>
<!-- <ul>
  <li *ngFor="let item of program_line">{{item.id}} {{item.program_name}} {{item.program_name}} {{item.title}} {{item.begin_time}} {{item.end_time}}</li>
</ul> -->

